<template>
  <div class="analysis-tool-header"></div>
  <div class="analysis-tool-body">
    <div class="analysis-tool-body-title">查询图层</div>
    <div class="analysis-tool-body-select">
      <TreeSelect @select="handleChange"></TreeSelect>
      <el-select
        v-model="form.banben"
        placeholder="版本"
        style="width: 140px"
        :disabled="banbenOptions.length == 0"
      >
        <el-option
          v-for="item in banbenOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="analysis-tool-body-title">行政区选择</div>
    <div class="analysis-tool-body-select">
      <el-cascader
        v-model="form.areaId"
        :options="areaOptions"
        :props="props"
        placeholder="请选择行政区"
        clearable
        @change="areaChange"
      />
    </div>
    <div class="analysis-tool-body-title title2">
      <span>查询条件</span>
      <img
        src="../../assets/layerTree/橡皮,擦除,橡皮擦.svg"
        alt=""
        style="width: 20px; height: 20px"
        @click="resetTiaojian"
      />
    </div>
    <div class="analysis-tool-body-3">
      <QueryDetails ref="queryDetails"></QueryDetails>
    </div>
    <div class="analysis-tool-body-title title2">
      <span>范围设置</span>
      <div>
        <el-color-picker
          v-model="form.color"
          show-alpha
          :predefine="predefineColors"
          style="margin-right: 30px"
        />
        <img
          src="../../assets/layerTree/橡皮,擦除,橡皮擦.svg"
          alt=""
          style="width: 20px; height: 20px"
          @click="resetFanwei"
        />
      </div>
    </div>
    <div class="analysis-tool-body-4">
      <el-popover
        placement="top-start"
        :width="150"
        trigger="hover"
      >
        <template #reference>
          <span title="上传shp文件"
            ><i class="icon iconfont icon-shangchuanicon"></i
          ></span>
        </template>
        <div>
          <div class="upload-file"><span> 1.支持txt格式</span><img src="../../assets/layerTree/眼睛.svg" alt="" style="width: 15px; height: 15px;margin-left: 5px;"><el-icon><Download /></el-icon></div>
          <p>2.支持shp格式</p>
          <p>3.支持zip格式</p>
        </div>
      </el-popover>

      <span title="点选要素范围"
        ><i class="icon iconfont icon-dianxuanicon"></i
      ></span>

      <span title="绘制多边形范围"
        ><i class="icon iconfont icon-liubianxingicon"></i
      ></span>

      <span title="绘制矩形范围"
        ><i class="icon iconfont icon-juxingicon"></i
      ></span>
    </div>

    <div class="analysis-tool-body-title">缓冲设置</div>
    <!-- //写一个可以输入的进度条 -->
    <div class="analysis-tool-body-5">
      <div class="progress">
        <slisd
          :min="0"
          :max="1000"
          :value="50"
          :isDrag="true"
          bgColor="rgb(12 76 219)"
        ></slisd>
      </div>
    </div>
    <div class="analysis-tool-body-title">空间关系设置</div>
    <el-radio-group v-model="form.relation">
      <el-radio :value="1">相交</el-radio>
      <el-radio :value="2">包含</el-radio>
      <el-radio :value="3">包含于</el-radio>
      <el-radio :value="4">重叠</el-radio>
    </el-radio-group>
  </div>
  <div class="analysis-tool-footer">
    <el-button type="primary" @click="handleReset">重置</el-button>
    <el-button type="primary" @click="handleQuery">查询</el-button>
  </div>
</template>

<script>
import TreeSelect from "./components/treeSelect.vue";
import QueryDetails from "./components/queryDetails.vue";
import slisd from "./components/slider.vue";
export default {
  name: "AnalysisTool",
  data() {
    return {
      value: "",
      banbenShow: false,
      banbenOptions: [
        // { label: "Option 1", value: "Option 1"},
        // { label: "Option 2", value: "Option 2" },
      ],
      areaOptions: [
        {
          value: "guide",
          label: "Guide",
          children: [
            {
              value: "disciplines",
              label: "Disciplines",
              children: [
                {
                  value: "consistency",
                  label: "Consistency",
                },
                {
                  value: "feedback",
                  label: "Feedback",
                },
                {
                  value: "efficiency",
                  label: "Efficiency",
                },
                {
                  value: "controllability",
                  label: "Controllability",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "side nav",
                  label: "Side Navigation",
                },
                {
                  value: "top nav",
                  label: "Top Navigation",
                },
              ],
            },
          ],
        },
        {
          value: "component",
          label: "Component",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout",
                },
                {
                  value: "color",
                  label: "Color",
                },
                {
                  value: "typography",
                  label: "Typography",
                },
                {
                  value: "icon",
                  label: "Icon",
                },
                {
                  value: "button",
                  label: "Button",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio",
                },
                {
                  value: "checkbox",
                  label: "Checkbox",
                },
                {
                  value: "input",
                  label: "Input",
                },
                {
                  value: "input-number",
                  label: "InputNumber",
                },
                {
                  value: "select",
                  label: "Select",
                },
                {
                  value: "cascader",
                  label: "Cascader",
                },
                {
                  value: "switch",
                  label: "Switch",
                },
                {
                  value: "slider",
                  label: "Slider",
                },
                {
                  value: "time-picker",
                  label: "TimePicker",
                },
                {
                  value: "date-picker",
                  label: "DatePicker",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker",
                },
                {
                  value: "upload",
                  label: "Upload",
                },
                {
                  value: "rate",
                  label: "Rate",
                },
                {
                  value: "form",
                  label: "Form",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table",
                },
                {
                  value: "tag",
                  label: "Tag",
                },
                {
                  value: "progress",
                  label: "Progress",
                },
                {
                  value: "tree",
                  label: "Tree",
                },
                {
                  value: "pagination",
                  label: "Pagination",
                },
                {
                  value: "badge",
                  label: "Badge",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert",
                },
                {
                  value: "loading",
                  label: "Loading",
                },
                {
                  value: "message",
                  label: "Message",
                },
                {
                  value: "message-box",
                  label: "MessageBox",
                },
                {
                  value: "notification",
                  label: "Notification",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "Menu",
                },
                {
                  value: "tabs",
                  label: "Tabs",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb",
                },
                {
                  value: "dropdown",
                  label: "Dropdown",
                },
                {
                  value: "steps",
                  label: "Steps",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog",
                },
                {
                  value: "tooltip",
                  label: "Tooltip",
                },
                {
                  value: "popover",
                  label: "Popover",
                },
                {
                  value: "card",
                  label: "Card",
                },
                {
                  value: "carousel",
                  label: "Carousel",
                },
                {
                  value: "collapse",
                  label: "Collapse",
                },
              ],
            },
          ],
        },
        {
          value: "resource",
          label: "Resource",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "docs",
              label: "Design Documentation",
            },
          ],
        },
      ],
      form: {
        nodeId: 0,
        relation: 1,
        banben: "",
        areaId: "",
        color: "rgba(255, 69, 0, 0.68)",
      },
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
    };
  },
  components: {
    TreeSelect,
    QueryDetails,
    slisd,
  },

  methods: {
    handleChange(node) {
      this.form.nodeId = node.id;
      //获取node下面的children
      //加载图层版本
      this.banbenOptions.push(
        { label: "Option 1", value: "Option 1" },
        { label: "Option 2", value: "Option 2" }
      );
    },
    resetTiaojian() {
      this.$refs.queryDetails.resetTiaojian();
    },
    areaChange(node) {
      this.form.nodeId = node.label;
    },
    resetFanwei() {
      //擦除地球上已有的范围线
    },
    handleReset() {},
    handleQuery() {},
  },
};
</script>

<style lang="scss" scoped>
.analysis-tool-header {
}
.analysis-tool-body {
  padding: 20px;
  ::v-deep .el-select__wrapper {
    background-color: rgba(16, 32, 46, 0.8);
  }
  ::v-deep .el-input__wrapper {
    background-color: rgba(16, 32, 46, 0.8);
  }
  ::v-deep .el-color-picker__trigger {
    border: none;
    width: 28px;
    height: 28px;
  }
  .title2 {
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      color: #fff;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 3px;
        height: 70%;
        background-color: #2f5dd8;
        transform: translateY(-50%);
        z-index: 1;
      }
    }
  }

  .analysis-tool-body-title {
    position: relative;
    color: #fff;
    padding-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    &:first-child {
      margin-top: 0px;
    }
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 3px;
      height: 70%;
      background-color: #2f5dd8;
      transform: translateY(-50%);
      z-index: 1;
    }
  }
  .analysis-tool-body-3 {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    /* 为滚动条整体设置样式 */
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    /* 为滚动条的轨道设置样式 */
    &::-webkit-scrollbar-track {
      background: rgba(#101f1c, 0.1);
      border-radius: 2em;
    }

    /* 为滚动条的滑块设置样式 */
    &::-webkit-scrollbar-thumb {
      background-color: rgba(144, 147, 153, 0.5);
      border-radius: 2em;
      transition: background-color 0.3s;
      cursor: pointer;
    }

    /* 当鼠标悬停在滑块上时改变滑块的颜色 */
    &::-webkit-scrollbar-thumb:hover {
      background-color: rgba(144, 147, 153, 0.3);
    }
  }
  .analysis-tool-body-4 {
    display: flex;
    align-items: center;
    .upload-file{
      display: flex;
      align-items: center;
    }
    span {
      margin-right: 20px;
      padding: 5px 10px;
      background-color: rgba(16, 32, 46, 0.8);
      i {
        color: #fff;
        font-size: 20px;
      }
    }
  }
  .analysis-tool-body-5 {
    .progress {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      .el-progress {
        width: 100%;
      }
    }
  }

  .analysis-tool-body-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-select {
      cursor: no-drop !important;
    }

    // ::v-deep .vue-treeselect__input {
    //    background: rgba(16, 32, 46, 0.8);
    // }
  }
}
.analysis-tool-footer {
  position: absolute;
  bottom: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  button {
    margin-left: 30px;
  }
}
</style>

<style lang="scss">
.testtooltip {
  position: relative;
  background: white !important;
  color: black;
}
</style>
